<template>
	<view class="content">
		<view class="row b-b">
			<text class="tit">{{i18n.addressmanager.name}}</text>
			<input class="input" type="text" v-model="addressData.name" :placeholder="i18n.addressmanager.nametips" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">{{i18n.addressmanager.mobile}}</text>
			<input class="input" type="number" v-model="addressData.tel" :placeholder="i18n.addressmanager.mobiletip" placeholder-class="placeholder" />
		</view>
		<view class="row b-b" @click="openAddres">
			<text class="tit">{{ i18n.addressmanager.address}}</text>
			<text class="input">{{ addressData.province }}{{ addressData.city }}{{ addressData.county }}</text>
			<!-- <button class="btns" type="primary" @tap="openAddres">默认打开地址</button> -->
			<text class="yticon icon-shouhuodizhi"></text>
		</view>
		<view class="row b-b">
			<text class="tit">{{i18n.addressmanager.doornum}}</text>
			<input class="input" type="text" v-model="addressData.addressDetail" :placeholder="i18n.addressmanager.doortips" placeholder-class="placeholder" />
		</view>

		<view class="row default-row">
			<text class="tit">{{i18n.addressmanager.selectdefault}}</text>
			<switch :checked="addressData.isDefault" color="#fa436a" @change="switchChange" />
		</view>
		<button class="add-btn" @click="confirm">{{i18n.addressmanager.submit}}</button>

		<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="#007AFF"></simple-address>
	</view>
	<!-- <view class="bg-mask" @tap="cancelSelectRegion" v-if="openSelectRegion"></view> -->
</template>

<script>
import simpleAddress from '@/components/simple-address/simple-address.nvue';
export default {
	data() {
		return {
			cityPickerValueDefault: [0, 0, 1],
			pickerText: '',
			addressData: {
				id: '',
				name: '',
				tel: '',
				province: '',
				city: '',
				county: '',
				addressDetail: '',
				areaCode: '',
				isDefault: true
			},
			manageType: 'add'
		};
	},
	components: {
		simpleAddress
	},
	computed:{
		   i18n() {  
		     return this.$i18nMsg()  
		   }
		},
	onLoad(option) {
		this.manageType = option.type;
		let title = this.$i18nMsg().pages.addaddress;
		let userInfo = uni.getStorageSync('userInfo') || '';
		if (option.type === 'edit') {
			title = this.$i18nMsg().pages.deditaddress;
			let item = option.item;

			uni.request({
				url: this.apiRoot + 'address/detail',
				method: 'GET',
				header: {
					'Content-Type': 'application/json',
					'X-Litemall-Token': userInfo.token
				},
				data: { id: item },
				success: res => {
					this.addressData = res.data.data;
				},
				fail: () => {},
				complete: () => {}
			});
		}

		uni.setNavigationBarTitle({
			title
		});
	},
	methods: {
		switchChange(e) {
			this.addressData.default = e.detail;
		},

		//地图选择地址
		chooseLocation() {
			uni.chooseLocation({
				success: data => {
					this.addressData.name = data.name;
					// 	this.addressData.province:'',
					// 	this.addressData.city:'',
					// 	this.addressData.county:'',
					// 	this.addressData.addressDetail:'',
				}
			});
		},

		//提交
		confirm() {
			let data = this.addressData;
			if (!data.name) {
				this.$api.msg('请填写收货人姓名');
				return;
			}
			if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(data.tel)) {
				this.$api.msg('请输入正确的手机号码');
				return;
			}
			if (!data.province) {
				this.$api.msg('请选择省份');
				return;
			}
			if (!data.addressDetail) {
				this.$api.msg('请填写门牌号信息');
				return;
			}

			//this.$api.prePage()获取上一页实例，可直接调用上页所有数据和方法，在App.vue定义
			// this.$api.prePage().refreshList(data, this.manageType);
			// this.$api.msg(`地址${this.manageType=='edit' ? '修改': '添加'}成功`);
			let userInfo = uni.getStorageSync('userInfo') || '';
			uni.request({
				url: this.apiRoot + 'address/save',
				method: 'POST',
				header: {
					'Content-Type': 'application/json',
					'X-Litemall-Token': userInfo.token
				},
				data: {
					id: this.addressData.id,
					name: this.addressData.name,
					tel: this.addressData.tel,
					province: this.addressData.province,
					city: this.addressData.city,
					county: this.addressData.county,
					areaCode: this.addressData.areaCode,
					addressDetail: this.addressData.addressDetail,
					isDefault: this.addressData.isDefault
				},
				success: res => {
					console.log(res.data);
					this.addressData.id = res.data.data;
				},
				fail: () => {},
				complete: () => {}
			});
			setTimeout(() => {
				//this.$api.prePage().addressList.concat(this.addressData);
				//prepage.$vm
				//调用前一个页面的方法刷新数据
				if (this.manageType == 'add') {
					var pages = getCurrentPages();
					var page = pages[pages.length - 2];
					page.$vm.refreshList(this.addressData, 'add');
					uni.navigateBack();
				} else if (this.manageType == 'edit') {
					var pages = getCurrentPages();
					var page = pages[pages.length - 2];
					page.$vm.refreshList(this.addressData, 'edit');
					uni.navigateBack();
				}
			}, 800);
		},
		openAddres() {
			this.cityPickerValueDefault = [0, 0, 1];
			this.$refs.simpleAddress.open();
		},
		openAddres2() {
			// 根据 label 获取
			var index = this.$refs.simpleAddress.queryIndex(['湖北省', '随州市', '曾都区'], 'label');
			console.log(index);
			this.cityPickerValueDefault = index.index;
			this.$refs.simpleAddress.open();
		},
		openAddres3() {
			// 根据value 获取
			var index = this.$refs.simpleAddress.queryIndex([13, 1302, 130203], 'value');
			console.log(index);
			this.cityPickerValueDefault = index.index;
			this.$refs.simpleAddress.open();
		},
		onConfirm(e) {
			this.addressData.areaCode = e.areaCode;
			this.addressData.province = e.labelArr[0];
			this.addressData.city = e.labelArr[1];
			this.addressData.county = e.labelArr[2];
			//console.log(e)
			//this.pickerText = JSON.stringify(e);
		}
	}
};
</script>

<style lang="scss">
page {
	background: $page-color-base;
	padding-top: 16upx;
}

.row {
	display: flex;
	align-items: center;
	position: relative;
	padding: 0 30upx;
	height: 110upx;
	background: #fff;

	.tit {
		flex-shrink: 0;
		width: 120upx;
		font-size: 30upx;
		color: $font-color-dark;
	}
	.input {
		flex: 1;
		font-size: 30upx;
		color: $font-color-dark;
	}
	.icon-shouhuodizhi {
		font-size: 36upx;
		color: $font-color-light;
	}
}
.default-row {
	margin-top: 16upx;
	.tit {
		flex: 1;
	}
	switch {
		transform: translateX(16upx) scale(0.9);
	}
}
.add-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 690upx;
	height: 80upx;
	margin: 60upx auto;
	font-size: $font-lg;
	color: #fff;
	background-color: $base-color;
	border-radius: 10upx;
	box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
}
</style>
